<!--
 * @Description: 课程详情
 * @Author: 老五 13521685612@163.com
 * @Date: 2024-11-09 14:43:47
 * @LastEditors: 老五 13521685612@163.com
 * @LastEditTime: 2024-11-21 19:55:00
 * @FilePath: /lieshou-app/pages/course_details.vue
-->


<template>
	<view class="content">
		<!-- <z-paging ref="paging" :refresher-threshold='1' :refresher-enabled='false'> -->
			<view slot="top" style="top-box">
				<!-- navbar -->
				<zNav :title="title" :showBack="true"></zNav>
				<!-- 详情卡片 -->
				<zCourseList :cover='coursesIns.courses.cover' :num="coursesIns.courses.init_finish"
					:recommend="coursesIns.courses.recommend" type="details"></zCourseList>
				<!-- menuBar -->
				<view class="menu-box">
					<view class="flex-box" v-for="(item, index) in typeList" :key="index">
						<view class="menu-box-title" :style="type === index?'font-weight: 600;':'font-weight: 300;'" @click="getTypeItem(item, index)">{{ item }}
						</view>
						<view class="menu-box-title-active" v-if="type === index"></view>
					</view>

				</view>
			</view>

			<view v-if="type == 0" class="bg-box">
				<!--  label-->
				<!--  <zLabel title="为什么要学"></zLabel>
        <zLabel title="你将会收获"></zLabel>
        <zLabel title="精彩抢先看"></zLabel> -->
				<view >
					<image class="img" :src="coursesIns.courses.desc" mode="widthFix"></image>
				</view>
			</view>

			<view v-else class="bg-box"> 
				<zCatalogueList v-if="coursesIns.contents!=''" :has_rights="query.has_rights" :isMember="false" :list="coursesIns.contents" :current="current" type='list'
					@getItem="getItem">
				</zCatalogueList>
				<uv-empty v-else mode="data" text='快去开通权益吧～' icon="http://cdn.uviewui.com/uview/empty/data.png">
				</uv-empty>
				<view class="gap"></view>
			</view>

			<!-- btn -->
			<view slot="bottom" class="btn-activity" @click="getImg">
				<cell style="width: 100%!important;height: 100%!important;" bind:startmessage='startmessage'
					styleType="2" blockStyle="button" bubbleColor="999999" bind:completemessage="completemessage"
					plugid='73da4edb00c1d95c2c617e90f2255168' />
				<!-- <view class="btn-clicktext">开通听课</view> -->
			</view>
		<!-- </z-paging> -->

		<!-- <view style="background-color: #fff;width: 100%;height: 100%;">
		<uv-popup ref="popup" round='20rpx' mode="bottom" :close-on-click-overlay="false">
			<view style="width: 100%;height: 1100rpx;padding: 50rpx 0;background-color: #fff;;">
				<image show-menu-by-longpress="true" style="width: 100%;height: 100%;object-fit: cover;" src="@/static/WechatIMG19.jpg" mode="aspectFill"> </image>
			</view>
		</uv-popup>	
		</view> -->
	</view>
</template>

<script>
	import zCourseList from "@/components/z-course-list.vue";
	import zLabel from "@/components/z-label.vue";
	import zCatalogueList from "@/components/z-catalogue-list.vue";
	import zNav from "@/components/z-nav.vue";
	export default {
		components: {
			zCourseList,
			zCatalogueList,
			zLabel,
			zNav
		},
		data() {
			return {
				// 用户信息
				userInfo: {},
				coursesIns: {
					courses: {},
					contents: {}
				},
				query:{},
				title: '课程详情',
				// 分类默认0
				type: 0,
				// 目录默认0
				current: 0,
				typeList: ["课程介绍", "课程目录"],
				catalogueList: [],
			};
		},
		methods: {
			getImg() {

				// this.$refs.popup.open();
			},
			getItemVideo(item) {
				uni.navigateTo({
					url: "/pages/video_details?id=" + item.courses.id
				})
			},
			// 
			initData(id) {
				this.$apis.getCoursesDetails({
					courses_id: id
				}).then((element) => {
					// 输出日志
					this.coursesIns = element
					console.log('获取课程详情', this.coursesIns)
					this.$forceUpdate()
				}).catch((e) => {
					// this.$utils.showToast('登录过期请稍后尝试！', 1000)
				})
			},
			// 分类选中
			getTypeItem(item, index) {
				this.type = index;
				this.$forceUpdate();
			},
			// 课程目录
			getItem(e) {
				this.current = e.index;
				this.$forceUpdate();
				console.log(e);
			},
		},
		async onLoad(query) {
		
			if (query) {
				this.query=query
				console.log('query',query)
				this.initData(parseInt(query.id))
				// this.title = query.name
				// #ifdef MP-WEIXIN
				this.$utils.showShare(
					 query.name,
					'',
					""
				);
				// #endif
			}
		},
	};
</script>

<style lang="scss">
	page {
		background-image: url("https://1257557568.vod-qcloud.com/d34b21d5vodcq1257557568/7b1391ad1397757896686948962/ERawiiRPGZkA.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.content {
		width: 750rpx;
		height: 100%;
		// header
		.top-box{
			position: relative;
			width: 100%;
		}

		.bg-box {
			width: 750rpx;
			margin: 0 auto;
			// height: 900rpx;
			overflow: auto;
			padding-bottom: 50rpx;

			.img {
				width: 100%;
				margin: 0 auto;
				display: block;
				/* 防止图片下方出现空隙 */
				object-fit: cover;
				/* 保持图片的宽高比 */
			}
		}
	}

	.gap {
		width: 100%;
		height: 100rpx;
	}

	.menu-box {
		width: 500rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		margin-bottom: 42rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

.flex-box{
	position: relative;
	width: auto;
	height: 34rpx;
	position: relative;
	padding-left: 30rpx;
	margin-bottom: 10rpx;
	padding-top: 10rpx;
	.menu-box-title-active {
		width: auto;
		height: 14rpx;
		position: relative;
		top: -20rpx;
		will-change: transform, filter;
		border-radius: 10rpx;
		background: rgba(252, 205, 229, 1);
		opacity: 1;
		filter: blur(6rpx);
	}
	
	.menu-box-title {
		font-size: 36rpx;
		letter-spacing: 0px;
		position: relative;
		width: auto;
		color: rgba(0, 0, 0, 1);
		text-align: left;
		z-index: 2;
	
	
	}
}

	}

	.course-list-box {
		width: 690rpx;
		margin: 0 auto;
		background-color: #fff;
		padding-bottom: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 25rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(235, 236, 237, 1);

		.course-list-label {
			font-size: 24rpx;
			font-weight: 500;
			margin-left: 30rpx;
			margin-bottom: 21rpx;
		}

		.course-list-box-title {
			/** 文本1 */
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
			margin-top: 26rpx;
			margin-left: 30rpx;
			text-align: left;
			vertical-align: top;
		}

		.course-list-box-flex {
			display: flex;
			align-items: center;
			margin-left: 26rpx;
			margin-top: 26rpx;
			justify-content: space-between;
			margin-bottom: 100rpx;

			.pup-list-name {
				display: flex;
				position: relative;
				width: 400rpx;

				.pup-active {
					width: 32rpx;
					height: 32rpx;
					opacity: 1;
					will-change: transform, filter;
					background: linear-gradient(128.84deg,
							rgba(253, 145, 200, 1) 0%,
							rgba(255, 255, 255, 0) 100%);
					filter: blur(10rpx);
				}

				.pup-box-name {
					/** 文本1 */
					width: auto;
					position: absolute;
					left: 10rpx;
					color: rgba(0, 0, 0, 1);
					text-align: left;
					vertical-align: top;

					font-size: 20rpx;
					font-weight: 300;
				}
			}

			.course-btn {
				width: 148rpx;
				height: 48rpx;
				line-height: 48rpx;
				border-radius: 34rpx;
				text-align: center;
				margin-right: 18rpx;
				background: rgba(217, 217, 217, 1);
				align-items: center;
				opacity: 1;
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}
		}
	}

	.btn-activity {
		position: fixed;
		bottom: 0;
		// top: 50%;
		// left: 50%;
		// transform: translate(-50%, -50%);
		margin-left: auto;

		margin-right: auto;
		width: 750rpx;
		margin: 0 auto;
		height: 78rpx;
		text-align: center;
		line-height: 78rpx;
		text-align: center;
		background: linear-gradient(to right,
				rgba(205, 235, 254, 1),
				rgba(254, 204, 229, 1),
				rgba(219, 188, 253, 1));
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0px;
		color: rgba(0, 0, 0, 1);
		.btn-clicktext{
			    position: absolute;
			    width: 100%;
			    top: 0;
			    display: flex;
			    justify-content: center;
			    align-items: center;
		}
	}
</style>